<template>
  <!-- 三维地图 -->
  <div id="mars3d-container"></div>
  <!-- <div>1111</div> -->
</template>

<script>
import * as Map from "./marsLibrary.js";
import * as mars3d from "mars3d";
const Cesium = mars3d.Cesium;

export default {
  data() {
    return {
      map: null,
      observe: {
        lat: 32.025349,
        lng: 118.793491,
        alt: 938,
        heading: 351,
        pitch: -35,
      },
      graphicLayer: null,
    };
  },
  mounted() {
    //初始化场景
    this.map = Map.initMap();
    //设定视角
    // this.map.setCameraView(this.observe, 0);
    //加载模型
    this.graphicLayer = new mars3d.layer.GraphicLayer();
    this.map.addLayer(this.graphicLayer);
    Map.bindLayerEvent(this.graphicLayer);
    Map.bindLayerPopup(this.graphicLayer);
    // 加载模型、开启深度检测
    Map.showModel(this.map);
    // this.map.scene.globe.depthTestAgainstTerrain = true;
    // 添加图标
    Map.showBillboard(this.graphicLayer);
    // 动态矢量图
    const changeLevel = 15;

    // 瓦片图，对比参考用
    const tileLayer = new mars3d.layer.ArcGisLayer({
      name: "瓦片图层",
      url: "http://localhost:6080/arcgis/rest/services/myTest/test2/MapServer",
      layers: "37",
      popup: "数据：瓦片图层<br />名称：{NAME}<br />层数：{floor}",
      maximumLevel: changeLevel - 1,
      maximumTerrainLevel: changeLevel - 1,
    });
    this.map.addLayer(tileLayer);
    // const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
    //   name: "建筑物面矢量图层",
    //   url: "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/37",
    //   where: " NAME like '%合肥%' ",
    //   minimumLevel: changeLevel,
    //   symbol: {
    //     type: "polygonP",
    //     styleOptions: {
    //       color: "#FED976",
    //       outline: false,
    //       opacity: 1
    //     }
    //   },
    //   buildings: {
    //     cloumn: "floor"
    //   },
    //   debuggerTileInfo: false,
    //   flyTo:true,
    //   popup: "数据：矢量图层<br />名称：{NAME}<br />层数：{floor}"
    // })
    // this.map.addLayer(wfsLayer)
  },
};
</script>